<script setup lang="ts">
import {
  ENERGY_COMPREHENSIVE,
  handleIdentity,
  identity,
  statusIdentity,
} from '../'
import StatisticsCard from '../StatisticsCard/index.vue'
import StatisticsCarousel from '../StatisticsCarousel/index.vue'
import type {
  StatisticsDataItem,
  StatisticsTabsProps,
} from '../type.d'

defineOptions({ name: 'StatisticsTabs' })
const props = withDefaults(
  defineProps<StatisticsTabsProps>(),
  {
    hideTrend: false,
    height: 120,
  },
)
// ------------------use------------------
// #region
const emits = defineEmits<{
  click: [data: StatisticsDataItem, e: Event]
  change: [active: string]
}>()
// 2024-06-20  修改
// 在班次、班组中组件对应数据源参数（能源品种）
// 查询时需要其对应的 indicatorNumber
const active = defineModel({ default: '' })
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
const comprehensiveData = computed(() => {
  if (props.data.length === 0) {
    return {} as any
  }
  else {
    return props.data.find(
      item => item.type === ENERGY_COMPREHENSIVE,
    )!
  }
})
const otherData = computed(() => {
  if (props.data.length === 0) {
    return []
  }
  else {
    return props.data.filter(
      item => item.type !== ENERGY_COMPREHENSIVE,
    )
  }
})
const hideTrend = computed(() => {
  return props.hideTrend
})
// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
watch(() => props.data, handleActive, {
  deep: true,
  immediate: true,
})
// #endregion
// ------------------方法---------------------
// #region
function handleClick(data: StatisticsDataItem, e: Event) {
  if (active.value === data.type)
    return
  active.value = data.type
  emits('click', data, e)
  emits('change', data.type)
}
function handleActive(data: StatisticsTabsProps['data']) {
  let newAct = ''
  // debugger;
  if (data.length === 0) {
    active.value = newAct
    emits('change', newAct)
    return
  }
  if (!active.value) {
    newAct = data[0]!.type
  }
  else {
    const types = data.map(item => item.type)
    if (types.includes(active.value)) {
      newAct = active.value
    }
    else {
      newAct = data[0]!.type
    }
  }
  active.value = newAct
  emits('change', newAct)
}
// #endregion
provide(identity, active)
provide(handleIdentity, handleClick)
provide(statusIdentity, hideTrend)
</script>

<template>
  <div class="statistics-tabs flex gap-col-sm align-start">
    <StatisticsCard
      v-if="data.length > 0 && false"
      v-bind="comprehensiveData"
      class="flex-incompressible margin-bottom-sm"
      :class="[
        {
          active: active === comprehensiveData.type,
        },
      ]"
      @click="handleClick(comprehensiveData, $event)"
    />
    <StatisticsCarousel
      :data="otherData"
      class="flex-fillRemaining"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
.statistics-tabs {
  --statistics-tabs-height: calc(
    1px * v-bind($props.height)
  );
}
//-------------样式穿透-------------
</style>
